<template>
  <view class="viewport">

    <view class="item-container">
      <view v-for="(item,index) in datalist" class="case-item">
        <view class="image_container">
          <image class="image_good" :src="getCover(item.imgList)">
          </image>
          <view class="tag">HUIDA 惠达</view>
        </view>
        <view class="item-right" @tap="detail(item)">
          <view class="right-container">
            <view class="right-title">型号</view>
            <view class="right-content">{{item.model}}</view>
          </view>

          <view class="right-container">
            <view class="right-title">提报时间</view>
            <view class="right-content">{{item.gmtCreate}}</view>
          </view>
          <view class="right-container">
            <view class="right-title">销售区域</view>
            <view class="right-content">{{item.areaFullName}}</view>
          </view>
          <view class="right-container">
            <view class="right-title">价格</view>
            <view class="right-content">{{item.price}}</view>
          </view>
          <view class="right-container">
            <view class="right-title">品牌</view>
            <view class="right-content">{{item.brand}}</view>
          </view>
          <view class="right-container">
            <view class="right-title">提报人</view>
            <view class="right-content">{{item.username}}</view>
          </view>
        </view>

      </view>

    </view>
    <button class="button" @click="competitionAdd">竞品提报</button>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { queryClCompetitorPage, saveClCompetitor } from '@/services/competition'
  import { baseURL } from '@/utils/http'

  const datalist = ref<any[]>([])

  onLoad(() => {
    uni.showLoading({
      title: ''
    })
    queryClCompetitorPage({}).then((res : any) => {

      uni.hideLoading()
      res.list.forEach((item : any) => {
        item.imgList = []
        if (item.attachIds) {
          if (item.attachIds.includes(',')) {
            const list = item.attachIds.split(',')
            list.forEach((url : string) => {
              item.imgList.push({
                url: url,
                id: ''
              })
            })

          } else {
            item.imgList.push({
              url: item.attachIds,
              id: ''
            })
          }
        }

      })
      datalist.value = res.list
      console.log(datalist.value)
    })
  })
  /**
   * 获取封面图
   */
  const getCover = (imgList : any[]) => {
    if (imgList && imgList.length > 0) {
      return imgList[0].url
    }
    return ''
  }
  //竞品提报
  const competitionAdd = () => {
    uni.navigateTo({
      url: '/pagesMember/competition/add'
    })
  }

  const detail = (item : any) => {
    uni.navigateTo({
      url: `/pagesMember/competition/detail?data=${JSON.stringify({
        ...item
      })}`
    })
  }
</script>

<style lang="scss">
  .viewport {
    display: flex;
    flex-direction: column;
    background-color: #F9FAFB;
    min-height: 100vh;

  }

  .top_container {
    justify-content: center;
    margin: 10rpx 15rpx;
    border-radius: 30rpx;
    border: 2rpx solid #61D7ED;
    // border-image: linear-gradient(180deg, rgba(97, 215, 237, 1), rgba(84, 185, 204, 1)) 2 2;
    display: flex;
    align-items: center;
  }

  .border-image-clip-path {
    width: 200px;
    height: 100px;
    border: 10px solid transparent;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0 round 10px);
  }

  .search_container {

    display: flex;
    flex-direction: column;
    padding: 12rpx 15rpx;
    border-radius: 20rpx;
    margin: 5rpx 10rpx;
    /* box-shadow: 1rpx 0.5rpx 0.5rpx lightgray; */

  }

  .search_btn {
    font-size: 30upx;
    width: 12%;
    color: white;
    padding: 16rpx 20rpx;
    background-color: #00BFA5;
    text-align: center;
    border-radius: 20rpx;
  }


  .screen_container {
    margin-top: 10rpx;
    margin-left: 20rpx;
    width: 100vw;
    display: flex;
    flex-direction: row;

  }



  .search_input {
    background-color: white;
    font-size: 28upx;
  }

  .selelct {
    width: 35vw;
    border-radius: 10rpx;
    text-align: center;
    background-color: white;
    margin-right: 15rpx;
  }



  .lines {
    width: 1px;
    background-color: gray;
  }

  .search {
    background-color: #f5f7f5;
    margin-right: 20rpx;
    border-radius: 15rpx;
    width: 82%;
  }

  .item-container {
    margin-top: 20rpx;
    margin-bottom: 150rpx;
    flex-grow: 1;
  }

  .item-right {
    display: flex;
    flex-direction: column;
    margin-left: 30rpx;

  }

  .right-container {
    display: flex;
    flex-direction: row;
  }

  .right-title {
    height: 40rpx;
    min-width: 120rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: rgba(28, 37, 58, 0.65);
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .right-content {
    height: 40rpx;
    margin-left: 10rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: rgba(28, 37, 58, 0.65);
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    overflow: hidden;
    text-transform: none;
  }


  .case-item {
    display: flex;
    margin-top: 10rpx;
    padding: 20rpx 10rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(209, 227, 230, 0.58);
    border-radius: 2rpx 2rpx 2rpx 2rpx;



    .image_container {
      position: relative;
      height: 240rpx;
      width: 240rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      border: 3rpx solid #00C1D1;
      overflow: hidden;
      /* 设置溢出隐藏 */

      .image_good {
        width: 100%;
        height: 320rpx;
      }

      .tag {
        text-align: center;
        line-height: 40rpx;
        height: 40rpx;
        width: 160rpx;
        left: 0;
        top: 0;
        color: white;
        font-size: 20rpx;
        position: absolute;
        border-top-left-radius: 16rpx;
        border-bottom-right-radius: 16rpx;
        background-color: #00C1D1;
      }

    }

    .text {
      text-align: left;
      margin-top: 40rpx;
      font-size: 24upx;
      color: #3d3d3d;
    }


  }

  .button {
    position: fixed;
    left: 10%;
    bottom: 30rpx;
    width: 80%;
    background-color: #54B9CC;
    color: white;
    font-size: 32rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }
</style>
